<template>
  <div :class="wrpCls">
<!--    <a-input-search placeholder="" style="width: 200px" @search="onSearch" />-->
<!--    <span style="padding: 0 6px 0 12px">-->
<!--      <a-badge dot>-->
<!--        <a-icon type="bell" style="font-size: 20px"/>-->
<!--      </a-badge>-->
<!--    </span>-->
    <a-popover placement="bottomRight">
    <template slot="content">
    <div class="notice-header-card scroll">
      <div class="notice-history" @click="showModal=true">历史记录</div>
      <template v-if="notice && notice.length">
        <div class="notice-header-cnt" @click="showDetail(item)" v-for="item in notice" :key="item.id">
        <h1>通知人：{{ item.createBy }}</h1>
        <div v-if="item.isWatch == 1" :class="['notice-header-status', 'readed']">已读</div>
        <div v-else :class="['notice-header-status']">未读</div>
        <p class="ellipsis-2">{{ item.content }}</p>
        <p style="text-align: right;font-size: 12px">{{ item.createTime }}</p>
      </div>
      </template>
      <a-empty description="暂无通知" style="margin-top: 80px" v-else />
      
    </div>
    </template>
    <a-badge :count="notice && notice[0] ? notice[0].num : ''">
            <a-icon type="bell" class="bell-icon" theme="filled" />
            </a-badge>
    </a-popover>
    <avatar-dropdown :class="prefixCls" :current-user="currentUser" :menu="showMenu" />

    <NoticeDetail v-model="show" :id="id" @cancel="cancel" />

    <NoticeHistory v-model="showModal" />
    <!--    <select-lang :class="prefixCls" />-->
  </div>
</template>

<script>
import AvatarDropdown from './AvatarDropdown'
import SelectLang from '@/components/SelectLang'
import {mapGetters} from 'vuex'
import { queryIssueUser } from '@/api/notice';
import NoticeDetail from './NoticeDetail';
import NoticeHistory from './NoticeHistory';
let noticeINT = '';
export default {
  name: 'RightContent',
  components: {
    AvatarDropdown,
    SelectLang,
    NoticeDetail,
    NoticeHistory
  },
  props: {
    prefixCls: {
      type: String,
      default: 'ant-pro-global-header-index-action'
    },
    isMobile: {
      type: Boolean,
      default: () => false
    },
    topMenu: {
      type: Boolean,
      required: true
    },
    theme: {
      type: String,
      required: true
    }
  },
  data () {
    return {
      searchInputShow: false,
      showMenu: true,
      currentUser: {},
      notice: [],
      id: '',
      show: false,
      showModal: false
    }
  },
      
  computed: {
    ...mapGetters(['avatar', 'userInfo']),
    wrpCls () {
      return {
        'ant-pro-global-header-index-right': true,
        [`ant-pro-global-header-index-${(this.isMobile || !this.topMenu) ? 'light' : this.theme}`]: true
      }
    }
  },
  mounted () {
    setTimeout(() => {
      this.currentUser = {
        name: 'Serati Ma'
      }
    }, 1500)
    noticeINT = setInterval(() => {
        this.queryIssueUser();
    }, 5000);
  },
  beforeDestroy() {
      noticeINT && clearInterval(noticeINT);
  },
  methods: {
    onSearch () {
    },
     cancel() {
        this.queryIssueUser();
    },
    queryIssueUser() {
      queryIssueUser({
          id: this.userInfo.uid
      }).then(res => {
          console.log(res);
          this.notice = res.data.records;
      });
    },
    showDetail({ id }) {
      this.id = id;
      this.show = true;
    },
  }
}
</script>
<style lang='less'>
.search-input {
  width: 0;
  transition: all 0.5s;
  &.active {
    width: 200px;
  }
}
.notice-header-card {
  width: 320px;
  height: 380px;
  overflow-y: auto;
  padding-right: 10px;
  .notice-history {
      position: absolute;
      right: 20px;
      cursor: pointer;
    }
  .notice-header-cnt {
    position: relative;
    padding: 12px 0;
    border-bottom: 1px solid #ddd;
    margin-top: 8px;
    h1,
    p {
      margin: 0;
    }

    h1 {
      font-size: 16px;
      font-weight: 400;
      color: #1F3B8A;
      line-height: 1.4;
      margin-bottom: 12px;
      max-width: 90%;
      cursor: pointer;
    }

    p {
      font-size: 14px;
      font-weight: 400;
      color: #999999;
      line-height: 18px;

      &:last-child {
        line-height: 1;
        margin-top: 4px;
      }
    }

    .notice-header-status {
      position: absolute;
      right: 0;
      top: 12px;
      font-size: 14px;
      color: red;

      &.readed {
        color: rgb(185, 185, 185);
      }

    }
  }
}
.bell-icon {
  color: #82BAFF;
  font-size: 18px;
  cursor: pointer;
  margin-right: 4px;
}
</style>
